﻿<template>
  <div>
    <!-- 标题部分 -->
    <V-Title :titleName = 'titleName'></V-Title>
    <div class='page_mainContent' v-loading = 'loading' element-loading-text = '数据请求中...'>
      <!-- 检索部分 start -->
      <el-row style = 'margin-bottom: 20px'>
        <el-col :span = '16'>
          <el-input placeholder = "请输入流程名称" v-model = 'searchKey' clearable></el-input>
        </el-col>
        <el-col :span = '6' style = 'margin-left: 10px'>
          <el-button type = 'primary' @click = 'getSearchData'>查询</el-button>
        </el-col>
      </el-row>
      <!-- 检索部分 end -->
      <!-- 表格部分 -->
      <div class='page_tableContent'>
        <el-table :data='tableData' style='width:100%' stripe border>
          <el-table-column  prop="Title" label="名称" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column  prop="Code" label="编码" align="center" :show-overflow-tooltip="true"></el-table-column>
          <!-- <el-table-column  prop="Type" label="类型" align="center"></el-table-column> -->
          <el-table-column  prop="AppCode" label="应用编码" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column  prop="Status" label="状态" align="center"></el-table-column>
          <el-table-column  prop="Version" label="当前本版" align="center"></el-table-column>
          <el-table-column  prop="Remark" label="备注" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" align="center" width='230'>
            <template slot-scope="scope">
              <el-button type='text' @click = "handleEdit(scope.row)"><i class='iconfont icon-bianji'></i>编辑</el-button>
              <el-button type='text' @click = "handleDelete(scope.row)"><i class='iconfont icon-shanchu'></i>删除</el-button>
              <el-button type='text' @click = "handlePath(scope.row)"><i class='iconfont icon-shezhi'></i>流程定义</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部按钮和页码部分 -->
      <div class='page_bottomContent'>
        <div class='page_btnsContent'>
          <el-button type="primary" @click='handleAdd ()'>添加流程</el-button>
        </div>
        <div class='page_paginationContent'>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size='pageSize'
            :pager-count="5"
            :page-sizes="[10, 25, 50, 100]"
            layout="total, sizes, prev, pager, next"
            :total='totalLength'>
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑和添加管理的弹窗 -->
    <el-dialog v-drag :title='dialogTitle' :visible.sync='dialogFormVisible' width='40%' class='main_dialog' @close="closeDialog" :model="ruleForm" ref="ruleForm">
      <el-form :model="ruleForm" ref="ruleForm" :label-width='labelWidth' :rules='rules'>
        <el-form-item label="名称：" prop='Title'>
          <el-input v-model='ruleForm.Title' placeholder="请输入应用名称"></el-input>
        </el-form-item>
        <el-form-item label="编码：" prop='Code' >
          <el-input v-model='ruleForm.Code' placeholder="默认编码" :disabled='isDisabled'></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型：" prop='classify'>
          <el-input v-model='ruleForm.classify ' placeholder="请输入类型"></el-input>
        </el-form-item> -->
        <el-form-item label="应用编码：" prop="AppCode" >
           <!-- <el-input v-model='ruleForm.AppCode' placeholder="默认编码"></el-input> -->
           <el-select v-model = "ruleForm.AppCode" @focus = 'getAppCode'>
            <el-option v-for = "(item,index) in appCodeList" :key = "index" :label = "item.Code" :value = "item.Code">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" prop='Status'>
          <el-select v-model="ruleForm.Status" placeholder="请选择状态">
            <el-option value="0" label="停用"></el-option>
            <el-option value="1" label="启用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本：" prop='publishVersion'>
          <el-select v-model="ruleForm.CurWFID" :placeholder="showVersion" :disabled='startDisabled'>
            <el-option
            v-for = "item in publishVersionList"
            :key = "item.WFID"
            :label = "'已发布版本号 '+item.Version"
            :value = "item.WFID">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model='ruleForm.Remark' placeholder="请输入备注" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item class='form_noLeftMargin'>
          <el-button type="info" @click="resetForm ('ruleForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm ('ruleForm', operationType)">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script src='./workflowManagement.js'></script>
